<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动函数</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding:50px;
        }
        #box{
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
    </style>
</head>
<body>
    <input type="button" value="运动" id="btn">
    <div id="box"></div>
</body>
<script src="./common.js"></script>
<script>
    /*
       
	运动框架封装：startMove()过渡    jq animate()
        最终版：多对象，多属性，链式运动框架(运动队列)
        参数一：对象名
        参数二：属性，目标值  键名：属性名，键值：目标值    {'width':200,'heigth':400}  实现：宽度和高度一起改变，宽度变成200，高度变成400
        参数三：回调函数(可选参数)
 
    */

    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    
    //点击btn就让box动起来
    // btn.onclick = function() {
    //     startMove(box,{'width' : 400, 'height' : 400, 'opacity' : 30});//宽、高、透明度同时变化
    // }


    btn.onclick = function() {
        startMove(box,{'width':400},function() {//链式运动：顺序 。先变宽，再变高
            startMove(box,{'height' : 400}, function() {
                startMove(box,{'opacity' : 30});
            });
        });
    }
</script>
</html>